<template>
    <ul class="news-list mt-20 mb-20">
        <li class="news-item" v-for="item in props.list" :key="item.articleId">
            <div class="date-container">
                <div class="day">{{ getDatePart(item.date)[2] }}</div>
                <div>{{ getDatePart(item.date)[0] }}-{{ getDatePart(item.date)[1] }}</div>
            </div>
            <div class="title">
                <a href="/">{{ item.title }}</a>
            </div>
        </li>
    </ul>
</template>
<script setup>
import { defineProps } from 'vue'
const props = defineProps({
    list: {
        type: Array,
        default: () => {
            return []
        },
    },
})
const getDatePart = (dateString) => {
    const parts = dateString.split('-')
    return parts
}
</script>
<style lang="scss" scoped>
.news-list {
    .news-item {
        list-style: none;
        border-bottom: 1px dotted #dbd4cd;
        margin: 20px 0;
        display: flex;

        .date-container {
            width: 80px;
            height: 80px;
            background-color: #09aed4;
            text-align: center;
            color: #fff;
            margin-bottom: 12px;
            margin-left: 30px;
            .day {
                padding-top: 20px;
                font-size: 24px;
            }
        }

        .title {
            font-size: 16px;
            font-weight: bold;
            margin-left: 30px;

            a {
                text-decoration: none;
                &:hover {
                    color: #09aed4;
                }
                &:visited {
                    color: initial;
                }
            }
        }
    }
}
</style>
